<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      body{
        --tomato: rgba(255, 130, 132, 0.8);
        --tomato-deep: #f86686;
        --tomato-rest: rgba(228, 173, 234, 0.7);
        --normal: rgba(98,89,255,0.7);
        --deep: #6660cf;
        margin: 0;
        padding: 0;
        /* 配合不透明度需要这个或在preload.js里写 backgroundColor: '#00000000' */
        /* background-color: rgba(0,0,0,0); */
      }
      .timer{
        position: relative;
        box-sizing: border-box;
        margin: 0 auto;
        padding: 24px 20px 16px;
        width: 100%;
        height: 100%;
        min-height: 120px;
        text-align: center;
        overflow: hidden;
        color: #fff;
        background-color: var(--normal);
        border-radius: 10px;
        /* electron 可拖拽实现 */
        -webkit-app-region: drag;
        -ms-user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
      }
      .timer.tomato{
        background-color: var(--tomato);
      }
      .timer.rest{
        background-color: var(--tomato-rest);
      }
      .timer-outer{
        position: relative;
      }
      .timer-outer::before{
        content: attr(data-decorate);
        position: relative;
        top: 10px;
        width: 100%;
        font-size: 12px;
        text-align: center;
        color: #ffdffe;
        visibility: hidden;
      }
      .tomato .timer-outer::before{
        visibility: visible;
      }
      p{
        /* display: none; */
        line-height: 14px;
        font-size: 12px;
      }
      p.show{
        display: block;
        word-wrap: break-word;
      }
      p.show.txt{
        text-align: left;
      }
      .timetxt{
        font-size: 16px;
        font-weight: 700;
      }
      
      .btn{
        position: absolute;
        top: 6px;
        width: 22px;
        height: 22px;
        line-height: 21px;
        font-size: 14px;
        text-align: center;
        background-color: var(--deep);
        border-radius: 10px;
        cursor: pointer;
        /* electron 可拖拽实现 - 点击事件需关闭*/
        -webkit-app-region: no-drag;
      }
      .tomato .btn,
      .tomato .delbtn{
        background-color: var(--tomato-deep);
      }
      .stopbtn.off{
        opacity: .4;
      }
      .closebtn{
        z-index: 999;
        right: 6px;
      }
      .copybtn{
        z-index: 998;
        right: 36px;
      }
      .addbtn{
        z-index: 997;
        right: 66px;
      }
      .btn.bellbtn{
        top: 8px;
        left: 10px;
        width: 16px;
        height: 18px;
        color: #fff;
        background-color: currentColor;
        border-radius: 50% 50% 2px 2px;
      }
      .bellbtn::before{
        content: "";
        position: absolute;
        left: 5px;
        bottom: -1px;
        width: 6px;
        height: 2px;
        border-top: 1px solid #68cbf8;
        background-color: currentColor;
        border-radius: 50%;
      }
      .bellbtn::after{
        content: attr(data-times);
        position: absolute;
        left: 5px;
        top: -1px;
        font-size: .8em;
        color: var(--tomato);
      }
      .tomato .bellbtn::before{
        border-top-color: var(--tomato);
      }
      .bellbtn.off{
        color: aliceblue;
        opacity: .3;
      }
      .playbtn{
        left: 36px;
      }
      .playbtn::before{
        content: "";
        position: absolute;
        left: 8px;
        top: 6px;
        width: 0;
        height: 0;
        border-left: 8px solid #fff;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-radius: 2.5px;
      }
      .playbtn.pause::before{
        content: "";
        position: absolute;
        left: 6px;
        top: 4px;
        width: 6px;
        height: 10px;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-bottom-color: transparent;
        border-radius: 2.5px;
      }
      
      .stopbtn{
        left: 66px;
      }
      .stopbtn::before{
        content: "";
        position: absolute;
        left: 6px;
        top: 6px;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-radius: 2px;
      }
      .inputbox{
        text-align: left;
        -webkit-app-region: no-drag;
      }
      .inputbox.unshow{
        display: none;
      }
      .input{
        width: 100%;
        height: 18px;
        border-radius: 2px; 
        border: none;
        outline: none;
      }
      .delbtn{
        display: inline-block;
        margin-right: 6px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background-color: var(--deep);
        border-radius: 10px;
        -webkit-app-region: no-drag;
        cursor: pointer;
      }
      
    </style>
  </head>
  <body>
    <div class="timer" title="整个提示窗口可改大小，拖拽(文本部分更好拖拽)">
      <div class="btn closebtn" title="右键关闭(Alt+F4)">×</div>
      <div class="btn copybtn" title="把当前数据复制到粘贴板">√</div>
      <div class="btn addbtn" title="完成输入：在提示框外点击一下">+</div>
      <div class="btn bellbtn off" title="开启番茄，切换普通计时与番茄计时-设置里修改值" data-work="25" data-rest="5" data-times="0"></div>
      <div class="btn playbtn pause" title="暂停或继续计时"></div>
      <div class="btn stopbtn" title="停止并重新计时"></div>
      <div class="timer-outer" data-decorate="(25+5)">
        <p class="timetxt"><span>00</span> : <span>00</span></p>
        <p class="countdown"></p>
        <p class="firstdo txt"></p>
      </div>
      <div class="inputbox unshow"><input class="input" type="text"></div>
    </div>
    
    <script> 
      const otimer = document.querySelector('.timer');
      var lines = document.querySelectorAll('.timer-outer p');
      var closebtn = document.querySelector('.closebtn');
      var addbtn = document.querySelector('.addbtn');
      var copybtn = document.querySelector('.copybtn');
      var bellbtn = document.querySelector('.bellbtn');
      var playbtn = document.querySelector('.playbtn');
      var stopbtn = document.querySelector('.stopbtn');
      var oinputbox = document.querySelector('.inputbox');
      var oinput = document.querySelector('.input');
      var oouter = document.querySelector('.timer-outer');
      let nowis = ''; // 记录当前阶段：倒计时 or 累计时
      let tomatois = false;
      let timer1 = null;
      let timer2 = null;
      let originTime = 0; // 单位为秒，倒计时
      function deleteOne(ele){
        var p = ele.parentElement;
        oouter.removeChild(p);
      }
      window.onload = function(){
        closebtn.onclick = function(){ // 关闭窗口
          window.sendMainMessage('close'); // 也没法实现
        }
        copybtn.onclick = function(){
          var temps = oouter.querySelectorAll('p.show');
          var txt = '';
          for(let i = 0; i < temps.length; i++){
            let temp = temps[i].innerText;
            temp = temp.replace('×', '');
            txt = txt + temp + '\n';
          }
        
          utools.copyText(txt);
          utools.showNotification('复制成功，可以到别处粘贴');
        }
        addbtn.onclick = function(){
          oinputbox.classList.remove('unshow');
          oinput.focus();
        }
        playbtn.onclick = controlFun;
        stopbtn.onclick = function(){
          let val = lines[0].innerText.slice(0,2);
          controlFun('del');
          playbtn.classList.add('pause');
          if (val.indexOf('剩余') === -1) {
            if(tomatois){
              bellbtn.classList.remove('off');
              otimer.classList.add('tomato');
              upCount('番茄');
            }else{
              bellbtn.classList.add('off');
              otimer.classList.remove('tomato');
              upCount('计时');
            }
          } else{
             downCount(originTime);
          }
          
        }
        function controlFun(type){
          if(playbtn.classList.contains('pause') || type === 'del'){ // 暂停
            playbtn.classList.remove('pause');
            clearInterval(timer1);
            clearInterval(timer2);
            timer1 = null;
            timer2 = null;
          }else{ // 继续播放
            playbtn.classList.add('pause');
            let type = lines[0].innerText.slice(0,2);
            if (nowis === 'downCount') {
              if(type === '该轮'){
                upCount('番茄');
              }else{
                downCount(playbtn.getAttribute('data-time') * 1, type);
              }
            } else{
              upCount(type, playbtn.getAttribute('data-time') * 1);
            }
          }
        }
        bellbtn.onclick = function(){
          let val = lines[0].innerText.slice(0,2);
          if(val.indexOf('剩余') === -1){ // ① 非剩余模式
            controlFun('del');
            playbtn.classList.add('pause');
            let time = 0;
            if(val !== '超时' && val !== '休息'){
              time = playbtn.getAttribute('data-time') * 1 + 1;
            }
            if(tomatois){ // 关闭番茄
              bellbtn.classList.add('off');
              otimer.classList.remove('tomato');
              tomatois = false;
              upCount('计时', time);
            }else{ // 开启番茄
              bellbtn.classList.remove('off');
              otimer.classList.add('tomato');
              tomatois = true;
              upCount('番茄', time);
            }
          }
          
        }
        oinput.onblur = function(){
          var temp = oinput.value.trim();
          temp = temp.replace(/javascript/gi, 'javascript');
          temp = temp.replace(/javascript:/g, '');
          temp = temp.replace(/<.*>/g, '');
          if(temp){
            var p = document.createElement('p');
            var html = '<span class="delbtn" onclick="deleteOne(this)">×</span><span>'+temp+'</span>';
            p.innerHTML = html;
            p.className = 'show txt';
            oouter.appendChild(p);
            oinput.value = '';
            oinputbox.classList.add('unshow');
          }
        }
        
        function downCount(second, type=null){ // 倒计时
          timer1 = null;
          var h = '不存在';
          nowis = 'downCount';
          if(second > 3600){
            h = Math.floor(second / 3600);
            second = second % 3600;
          }else if(second <= 0){
            second = 0;
            upCount('计时');
            return;
          }
          var min = Math.floor(second / 60);
          var s = second % 60;
          var hh, mm, ss;
          let frontTxt = type==='休息'?'休息 ':(second?'剩余 ':'');
          timer1 = setInterval(function(){
            if(h !== '不存在'){
              hh = h < 10?'0'+h:h;
            }
            mm = min < 10?'0'+min:min;
            ss = s < 10?'0'+s:s;
            lines[0].innerText = frontTxt + ' ' + (hh?hh+' : ':'') + mm +' : ' + ss;
            playbtn.setAttribute('data-time', min*60+s);
            s--;
            if(s < 0){
              if(min <= 0){
                if(h === '不存在' || (h !== '不存在' && h <= 0)){
                  if(type === '休息'){
                    lines[0].innerText = '该轮番茄计时结束了';
                    playbtn.className = 'btn playbtn';
                  }else{
                    upCount('超时');
                  }
                  clearInterval(timer1);
                  timer1 = null;
                }
                h--;
                min = 59;
              }
              min--;
              s = 59;
            }
          }, 1000);
          
        }
        
        let tomatoNum = 0;
        function upCount(type, time){
          timer2 = null;
          otimer.classList.remove('rest');
          playbtn.className = 'btn playbtn pause';
          nowis = 'countAdd';
          var min = 0;
          var s = 1;
          if(!isNaN(time)){
            min = Math.floor(time / 60);
            s = time % 60;
          }
          // console.log(min, s, type)
          let mm, ss;
          let twss=0, trss=0, total=0;
          let frontTxt = type;
          if(tomatois){
            twss = bellbtn.getAttribute('data-work') * 60;
            trss = bellbtn.getAttribute('data-rest') * 60;
          }
          timer2 = setInterval(function(){
            mm = min < 10?'0'+min:min;
            ss = s < 10?'0'+s:s;
            lines[0].innerText = frontTxt + ' ' + mm + ' : ' + ss;
            total = min * 60 + s;
            playbtn.setAttribute('data-time', total);
            s++;
            if(tomatois && total >= twss){ // 番茄结束
              tomatoNum++;
              bellbtn.setAttribute('data-times', tomatoNum);
              otimer.classList.add('rest');
              downCount(trss, '休息');
              clearInterval(timer2);
              timer2 = null;
            }
            if(s >= 60){
              s = 0;
              min++;
              if(min >= 60){
                lines[0].innerText = '超过1小时了';
                utools.showNotification('超过1小时了');
                clearInterval(timer2);
                timer2 = null;
              }
            }
          }, 1000);
        }
        
        setTimeout(function(){
          var txtobj = window.getTimerData();
          var dataname = ['time', 'countdown', 'firstdo'];
          if(txtobj){
            let val = txtobj['tomato']['work'] + '+' + txtobj['tomato']['rest'];
            oouter.setAttribute('data-decorate', '(' + val + ')');
            bellbtn.setAttribute('data-work', txtobj['tomato']['work']);
            bellbtn.setAttribute('data-rest', txtobj['tomato']['rest']);
            for(let i = 0; i < dataname.length; i++){
              let tempname = dataname[i];
              if(tempname === 'time'){
                originTime = txtobj['time'] * 1;
                downCount(originTime);
              }else{
                lines[i].innerText = txtobj[tempname];
              }
              lines[i].classList.add('show');
            }
          }
        }, 1000);
      }
    </script>
  </body>
</html>
